<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      title="反馈详情"
      width="50%"
      :before-close="handleClose"
    >
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="反馈内容" name="first">
          <div id="basicInfo" class="block">
            <div class="space-y-6">
              <div class="flex items-start">
                <img
                  src="./c6c8d34e200388491de48f7402e6531e.png"
                  class="w-10 h-10 mr-3"
                />
                <div class="flex-1">
                  <div class="flex items-center justify-between mb-2">
                    <div class="flex items-center space-x-2">
                      <span class="text-gray-900 font-medium">陈思远</span>
                      <span class="text-xs text-red-500">投诉</span>
                      <span class="text-xs text-gray-500">设备故障</span>
                    </div>
                    <span class="text-sm text-gray-500"
                      >2023-09-15 09:32:15</span
                    >
                  </div>
                  <div
                    class="text-gray-900 text-sm mb-4 bg-gray-50 p-4 !rounded-lg"
                  >
                    我购买的智能项圈在使用过程中出现了故障，LED
                    指示灯不断闪烁，同时无法正常连接手机
                    APP。这已经是第二次出现同样的问题了，严重影响了使用体验。希望能尽快解决这个问题，并提供相应的补偿方案。
                    具体问题： 1. LED 指示灯异常闪烁 2. 无法与手机 APP 配对连接
                    3. 电池续航明显下降 期望得到： 1. 更换新的设备 2. 延长保修期
                    3. 提供使用补偿 设备信息： - 产品型号：PT-100 -
                    购买日期：2023-08-01 - 订单编号：202308010023
                  </div>
                  <div class="bg-gray-50 p-4 !rounded-lg space-y-4">
                    <h4 class="font-medium text-gray-900">处理进度</h4>
                    <div class="space-y-2">
                      <div class="flex items-center text-sm">
                        <div class="w-24 text-gray-500">2023-09-15</div>
                        <div class="text-gray-900">客服接收反馈，开始处理</div>
                      </div>
                      <div class="flex items-center text-sm">
                        <div class="w-24 text-gray-500">2023-09-15</div>
                        <div class="text-gray-900">技术部门介入排查</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="处理记录" name="second">处理记录</el-tab-pane>
      </el-tabs>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted } from "vue";
// 接收参数
const props = defineProps(["open"]);
const status: any = reactive(props);
// eslint-disable-next-line vue/no-dupe-keys
const { open } = toRefs(status);
// 返回参数方法
const emits = defineEmits("detailChange");
// 控制显示隐藏
const dialogVisible = ref<boolean>(false);
// 关闭
const handleClose = () => {
  dialogVisible.value = false;
  emits("detailChange", dialogVisible.value);
};
// tabs值
const activeName = ref("first");
const handleClick = (t, e) => {
  activeName.value = t.props.name;
};
onMounted(() => {
  console.log("onMounted");
  dialogVisible.value = open;
});
</script>

<style scoped></style>
